{% load staticfiles %}
<script src="{% static "js/message/ws4redis.js" %}"></script>
<script type="text/javascript">
{#    jQuery(document).ready(function ($) {#}
{#        var url = encodeURI(window.location.host);#}
{#        var ws4redis = WS4Redis({#}
{#            uri: 'ws://'+url+'/ws/foobar?subscribe-user',#}
{#            receive_message: receiveMessage,#}
{#            heartbeat_msg: {{ WS4REDIS_HEARTBEAT }}#}
{#        });#}
{#        // receive a message though the Websocket from the server#}
{#        function receiveMessage(msg) {#}
{#            var data = jQuery.parseJSON('' + msg + '');#}
{#            $.each(data, function (key, value) {#}
{#                if (key == "sub") {#}
{#                    $("#sp-subject").html(value);#}
{#                }#}
{#                if (key == "username") {#}
{#                    $("#sp-username").html(value);#}
{#                }#}
{#                if (key == "time") {#}
{#                    $("#sp-time").html(value);#}
{#                }#}
{#                if (key == "id") {#}
{#                    $("#msg_id").val(value);#}
{#                    var id = value#}
{#                    $.post('{% url "message:message.async" %}', {#}
{#                        id: id,#}
{#                    }, function (datas) {#}
{#                        var data = jQuery.parseJSON('' + datas + '');#}
{#                        alert(datas)#}
{#                        if ("0" == data["type"]) {#}
{#                            $("#li-message").show()#}
{#                        } else {#}
{#                            $("#li-message").hide#}
{#                        }#}
{#                    })#}
{#                }#}
{#            });#}
{#        }#}
{##}
        {#        $("a[name='a-message']").click(function () {#}
        {#            window.location.href = "message/detail/" + $("#msg_id").val();#}
        {#        });#}
{#    });#}


</script>

<div id="navbar" class="navbar navbar-default" style="position: fixed;width: 100%;z-index: 111111;float: left;">
    <script type="text/javascript">
        try {
            ace.settings.check('navbar', 'fixed')
        } catch (e) {
        }
    </script>

    <div class="navbar-container" id="navbar-container">
        <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
            <span class="sr-only">Toggle sidebar</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>
        </button>

        <div class="navbar-header pull-left">
            <a href="index.html" class="navbar-brand">
                <small>
                    <img src="{% static 'images/cloud_logo@2x.png' %}" alt="" width="80em">
                    {{ name }}
                </small>
            </a>
        </div>
        <input id="msg_id" style="display: none;">
        <div class="navbar-buttons navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">

                <li class="green" style="display: none" id="li-message">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
                        <span class="badge badge-success"></span>
                    </a>

                    <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="ace-icon fa fa-envelope-o"></i>
                            最新消息
                        </li>

                        <li class="dropdown-content">
                            <ul class="dropdown-menu dropdown-navbar">
                                <li>
                                    <a href="#" class="clearfix" id="a-message-detail" name="a-message">
                                        <img src="{% static 'avatars/avatar.png' %}" class="msg-photo"
                                             alt="Alex's Avatar"/>
												<span class="msg-body">
													<span class="msg-title" id="sp-subject">
														<span class="blue" id="sp-username"></span>
													</span>

													<span class="msg-time">
														<i class="ace-icon fa fa-clock-o"></i>
														<span id="sp-time"></span>
													</span>
												</span>
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown-footer">
                            <a href="{% url 'message:message.list' %}">
                                See all messages
                                <i class="ace-icon fa fa-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="light-blue">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">

                        <img class="nav-user-photo" style="width: 40px;height: 40px"
                             src={{ MEDIA_URL }}{{ IMG_URL }}  onerror="src='{% static "images/user.jpg" %}';"
                             alt=" photo"/>

								<span>
									{{ USERNAME }}
								</span>

                        <i class="ace-icon fa fa-caret-down"></i>
                    </a>

                    <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="{% url 'sysadmin:user.userInfo' %}">
                                <i class="ace-icon fa fa-user"></i>
                                个人信息
                            </a>
                        </li>
                        <li>

                            <a href="{% url 'sysadmin:user.changePwd' %}">
                                <i class="ace-icon fa fa-cog"></i>
                                修改密码
                            </a>
                        </li>
                        <li>
                            <a href="/logout/">
                                <i class="ace-icon fa fa-power-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div><!-- /.navbar-container -->
</div>